<template>
  <div class="comments" v-if="props.movieShortComments.shortComments.length > 0">

    <header class="title">短评</header>

    <ul>
      <li class="comment" v-for="(item, index) in props.movieShortComments.shortComments" :key="index">

        <div class="avatar">
          <img :src="item.avatarUrl" alt="">
        </div>

        <div class="right">

          <div class="username-rating-thumbsUp">

            <div class="username-rating">
              <div class="username">{{ item.nick }} <span class="user-level">
                  <img :src="levelImages[item.userLevel]" :alt="item.userLevel" v-if="levelImages[item.userLevel]" />
                </span></div>

              <div class="rating">
                <Vue3StarRatings v-model="starRating[index]" :starSize="10" starColor="#ffb400" inactiveColor="#e1e1e1"
                  :numberOfStars="5" :disableClick="true" style="display: inline-block;" />
                <span>{{ item.score }} 分</span>
              </div>
            </div>

            <div class="thumbsUp"><van-icon name="good-job-o" size="16" /> {{ item.upCount }}</div>
          </div>

          <div class="content">

            <!-- <van-text-ellipsis rows="7" :content="item.content" /> -->
            {{ item.content }}
          </div>

          <div class="date-reply">
            <span class="date">{{ timestampToDate(item.time) }}</span>
            <span class="reply">{{ item.replyCount }} 回复</span>
          </div>

        </div>

      </li>

    </ul>

    <van-button block hairline plain>打开App，查看全部{{ props.movieShortComments.total }}个短评

      <van-icon name="arrow" />
    </van-button>

  </div>
</template>


<script>
import { defineComponent } from "vue";
import Vue3StarRatings from "vue3-star-ratings"; // 确保组件名称正确

export default defineComponent({
  components: {
    Vue3StarRatings // 确保组件名称与导入名称一致
  },
});
</script>



<script setup>
import { computed } from "vue";
import { timestampToDate } from "@/tools/index.js"

const props = defineProps({
  movieShortComments: {
    type: Array,
  }
});

// 10分制转换为5星
const starRating = computed(
  () => {
    return props.movieShortComments.shortComments.map(item => item.score / 2);
  });


// 使用 import.meta.glob 动态导入 user_level 文件夹中的所有图片
const levelImages = {};
const levelModules = import.meta.glob('@/assets/user_level/*.png', { eager: true });
for (const path in levelModules) {
  const level = path.match(/level(\d+)\.png/)[1];
  levelImages[level] = levelModules[path].default;
}



</script>


<style scoped>
.comments {

  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
  background-color: #fff;
  overflow: visible;
  /* 确保子元素的 border-radius 不被裁剪 */
}

.comments .title {
  padding: 10px 0 10px 10px;
  background-color: #fff;

}

.comments ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  padding: 0 10px;
}

.comments ul .comment {
  border-bottom: 1px solid #e8e8e8;
  display: grid;
  grid-template-columns: 1fr 10fr;
  padding: 10px 0;
}

.comments ul .comment:last-child {
  border-bottom: none;
}


.comments ul .comment .avatar {
  margin-right: 10px;
}


.comments ul .comment .avatar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.comments ul .comment .right {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;


}



.comments ul .comment .right .username-rating-thumbsUp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}


.comments ul .comment .right .username-rating-thumbsUp .username-rating {
  /* display: flex;
   align-items: center; */

}


.comments ul .comment .right .username-rating-thumbsUp .username-rating .username {
  color: #333;
  font-size: 12px;
  height: 18px;
  line-height: 1;
}

.comments ul .comment .right .username-rating-thumbsUp .username-rating .user-level {
  font-size: 12px;
  width: 36px;
  height: 16px;
  line-height: 1;
}

.comments ul .comment .right .username-rating-thumbsUp .username-rating .user-level img {
  width: 36px;
  height: 16px;
}


.comments ul .comment .right .username-rating-thumbsUp .username-rating .rating {

  color: #ffb400;
  font-size: 12px;
  display: flex;
  align-items: center;


}


.comments ul .comment .right .username-rating-thumbsUp .thumbsUp {
  border-radius: 20px;
  border: 1px solid #ccc;
  font-size: 12px;
  padding: 4px 10px;
  color: #999;
}



.vue3-star-ratings {
  margin-right: 4px;
}


.comments ul .comment .right .content {
  color: #333;
  font-size: 15px;
  line-height: 21px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  text-overflow: ellipsis;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  margin-top: 5px;
}


.comments ul .comment .right .date-reply {
  margin: 10px 0;
  width: 100%;
  font-size: 12px;
  color: #666;
}

.comments ul .comment .right .date-reply .date {
  margin-right: 10px;
}

.comments ul .comment .right .date-reply .reply {
  display: inline-block;
  font-size: 12px;
  color: #5a7cab;
  border-radius: 10px;
  background: #eef1f6;
  padding: 2px 8px;
}


:deep(.van-button__text) {
  color: #e54847;
}
</style>
